<!DOCTYPE html>  
<html lang="zh-CN">  
  
<head>    
    <meta charset="UTF-8">    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <title>AIForge - 智能意图自适应执行引擎</title>    
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">    
        
    <!-- 1. 首先加载本地完整样式，确保页面立即可用 -->    
    <link href="/static/css/tailwind.min.css" rel="stylesheet">    
    <link href="/static/css/aiforge.css" rel="stylesheet">    
        
    <!-- 2. 同时异步加载远程CDN，成功后可能提供更新版本 -->    
    <link rel="preload" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" as="style" onload="this.rel='stylesheet'">    
    <noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"></noscript>    
        
    <script>    
    // 可选：检测远程CSS加载状态的辅助函数    
    function checkRemoteCSSLoaded() {    
        // 这个函数可以用来检测远程CSS是否成功加载    
        // 但由于本地CSS已经提供完整支持，这不是必需的    
    }    
    </script>    
</head>
  
<body class="bg-gray-50">  
    <!-- 顶部导航 -->  
    <nav class="bg-white shadow-sm border-b">  
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">  
            <div class="flex justify-between h-16">  
                <div class="flex items-center">  
                    <h1 class="text-xl font-bold text-gray-900">🚀 AIForge</h1>  
                    <span class="ml-2 text-sm text-gray-500">智能意图自适应执行引擎</span>  
                </div>  
                <div class="flex items-center space-x-4">  
                    <button id="settingsBtn" class="text-gray-500 hover:text-gray-700">⚙️</button>  
                </div>  
            </div>  
        </div>  
    </nav>  
  
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">  
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">  
            <!-- 左侧：输入区域 -->  
            <div class="lg:col-span-1">  
                <div class="bg-white rounded-lg shadow p-6">  
                    <h2 class="text-lg font-semibold mb-4">指令输入</h2>  
  
                    <!-- 任务类型快速选择 -->  
                    <div class="mb-4">  
                        <label class="block text-sm font-medium text-gray-700 mb-2">任务类型</label>  
                        <div class="grid grid-cols-2 gap-2" id="taskTypeButtons">  
                            <button class="task-type-btn" data-type="data_fetch">📊 数据获取</button>  
                            <button class="task-type-btn" data-type="data_analysis">📈 数据分析</button>  
                            <button class="task-type-btn" data-type="content_generation">✍️ 内容生成</button>  
                            <button class="task-type-btn" data-type="code_generation">💻 代码生成</button>  
                            <button class="task-type-btn" data-type="search">🔍 搜索查询</button>  
                            <button class="task-type-btn" data-type="direct_response">💬 知识问答</button>  
                        </div>  
                    </div>  
  
                    <!-- 指令输入框 -->  
                    <div class="mb-4">  
                        <label class="block text-sm font-medium text-gray-700 mb-2">自然语言指令</label>  
                        <textarea id="instructionInput" rows="4"  
                            class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"  
                            placeholder="请输入您的指令，例如：搜索最新的AI技术趋势并生成分析报告"></textarea>  
                    </div>  
  
                    <!-- 执行按钮 -->  
                    <div class="flex space-x-2">  
                        <button id="executeBtn"  
                            class="flex-1 bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 disabled:opacity-50">  
                            <span id="executeText">🚀 执行指令</span>  
                        </button>  
                        <button id="stopBtn"  
                            class="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50"  
                            disabled>  
                            ⏹️ 停止  
                        </button>  
                    </div>  
  
                    <!-- 示例指令 -->  
                    <div class="mt-4">  
                        <details class="text-sm">  
                            <summary class="cursor-pointer text-gray-600">💡 示例指令</summary>  
                            <div class="mt-2 space-y-1 text-gray-500">  
                                <div class="example-instruction cursor-pointer hover:text-blue-600"  
                                    data-instruction="搜索最新的人工智能发展趋势">📊 搜索最新的人工智能发展趋势</div>  
                                <div class="example-instruction cursor-pointer hover:text-blue-600"  
                                    data-instruction="生成一份关于Python编程的学习计划">✍️ 生成一份关于Python编程的学习计划</div>  
                                <div class="example-instruction cursor-pointer hover:text-blue-600"  
                                    data-instruction="编写一个计算斐波那契数列的函数">💻 编写一个计算斐波那契数列的函数</div>  
                            </div>  
                        </details>  
                    </div>  
                </div>  
            </div>  
  
            <!-- 右侧：执行进度和结果 -->  
            <div class="lg:col-span-2">  
                <!-- 执行进度 -->  
                <div class="bg-white rounded-lg shadow p-6 mb-6">  
                    <h2 class="text-lg font-semibold mb-4">执行进度</h2>  
                    <div id="progressContainer" class="h-48 overflow-y-auto bg-gray-50 rounded p-4 font-mono text-sm">  
                        <!-- JavaScript会直接在这里添加进度消息 -->  
                    </div>  
                </div>  
  
                <!-- 结果展示区域 -->  
                <div class="bg-white rounded-lg shadow p-6">  
                    <div class="flex justify-between items-center mb-4">  
                        <h2 class="text-lg font-semibold">执行结果</h2>  
                    </div>  
                    <div id="resultContainer" class="min-h-80">  
                        <div class="text-gray-500 text-center py-8">执行结果将在这里显示...</div>  
                    </div>  
                </div>  
            </div>  
        </div>  
    </div>  
  
    <!-- 设置模态框 -->  
    <div id="settingsModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">  
        <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">  
            <div class="mt-3">  
                <div class="flex items-center justify-between mb-4">  
                    <h3 class="text-lg font-medium text-gray-900">配置设置</h3>  
                    <button id="closeSettings" class="text-gray-400 hover:text-gray-600">  
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">  
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>  
                        </svg>  
                    </button>  
                </div>  
                  
                <form id="configForm" class="space-y-4">  
                    <!-- API密钥配置 -->  
                    <div>  
                        <label for="apiKeyInput" class="block text-sm font-medium text-gray-700 mb-1">  
                            API密钥  
                        </label>  
                        <input type="password" id="apiKeyInput"   
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"  
                               placeholder="请输入您的API密钥">  
                        <p class="mt-1 text-xs text-gray-500">  
                            API密钥仅在本次会话中有效，不会被保存  
                        </p>  
                    </div>  
  
                    <!-- 提供商选择 -->  
                    <div>  
                        <label for="providerInput" class="block text-sm font-medium text-gray-700 mb-1">  
                            LLM提供商  
                        </label>  
                        <select id="providerInput" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">  
                            <option value="openrouter">OpenRouter</option>  
                            <option value="deepseek">DeepSeek</option>  
                            <option value="ollama">Ollama (本地)</option>  
                            <option value="grok">Grok (X.AI)</option>  
                            <option value="qwen">通义千问</option>  
                            <option value="gemini">Google Gemini</option>  
                            <option value="claude">Anthropic Claude</option>  
                            <option value="cohere">Cohere</option>  
                            <option value="mistral">Mistral AI</option>  
                        </select>  
                    </div>  
  
                    <!-- 语言选择 -->  
                    <div>  
                        <label for="localeInput" class="block text-sm font-medium text-gray-700 mb-1">  
                            界面语言  
                        </label>  
                        <select id="localeInput" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">  
                            <option value="zh">中文 (简体)</option>  
                            <option value="en">English</option>  
                            <option value="ja">日本語</option>  
                            <option value="ko">한국어</option>  
                            <option value="fr">Français</option>  
                            <option value="de">Deutsch</option>  
                            <option value="es">Español</option>  
                            <option value="pt">Português</option>  
                            <option value="ru">Русский</option>  
                            <option value="ar">العربية</option>  
                            <option value="hi">हिन्दी</option>  
                            <option value="vi">Tiếng Việt</option>  
                        </select>  
                    </div>  
  
                    <!-- 高级设置 -->  
                    <div class="border-t pt-4">  
                        <h4 class="text-sm font-medium text-gray-700 mb-2">高级设置</h4>  
                          
                        <div class="grid grid-cols-2 gap-3">  
                            <div>  
                                <label for="maxRoundsInput" class="block text-xs text-gray-600 mb-1">  
                                    最大轮数  
                                </label>  
                                <input type="number" id="maxRoundsInput" min="1" max="10"   
                                       class="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"  
                                       placeholder="2">  
                            </div>  
                            <div>  
                                <label for="maxTokensInput" class="block text-xs text-gray-600 mb-1">  
                                    最大Token数  
                                </label>  
                                <input type="number" id="maxTokensInput" min="1024" max="32768" 
                                       class="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"  
                                       placeholder="4096">  
                            </div>  
                        </div>  
  
                        <!-- 进度显示级别 -->  
                        <div class="mt-3">  
                            <label for="progressLevelSelect" class="block text-xs text-gray-600 mb-1">  
                                进度显示级别  
                            </label>  
                            <select id="progressLevelSelect" class="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500">  
                                <option value="detailed">详细模式 - 显示所有进度信息</option>  
                                <option value="minimal">简化模式 - 只显示关键节点</option>  
                                <option value="none">静默模式 - 不显示进度信息</option>  
                            </select>  
                        </div>  
                    </div>  
  
                    <!-- 按钮组 -->  
                    <div class="flex justify-end space-x-3 pt-4">  
                        <button type="button" id="cancelSettings"   
                                class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 border border-gray-300 rounded-md hover:bg-gray-200">  
                            取消  
                        </button>
                        <button type="submit"   
                                class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700">  
                            保存配置  
                        </button>  
                    </div>  
                </form>  
            </div>  
        </div>  
    </div>  
  
    <script src="/static/js/session.js"></script>  
    <script src="/static/js/config-manager.js"></script>  
    <script src="/static/js/streaming-client.js"></script>  
    <script src="/static/js/ui-adapters.js"></script>  
    <script src="/static/js/main.js"></script>  
</body>  
  
</html>